<%@ page import="com.bean.User" %>
<%@ page import="java.util.List" %>
<%@ page import="com.util.Pagination" %>
<%@ page import="java.util.ArrayList" %>
<%--
  Created by IntelliJ IDEA.
  User: 徐洲
  Date: 2023/12/18
  Time: 11:24
  To change this template use File | Settings | File Templates.
--%>
<%
  request.setCharacterEncoding("UTF-8");
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<jsp:useBean id="adminDao" class="com.daoImpl.AdminDAOImpl"></jsp:useBean>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>摆烂俱乐部后台</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="all,follow">
  <!-- Bootstrap CSS-->
  <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome CSS-->
  <link rel="stylesheet" href="../vendor/font-awesome/css/font-awesome.min.css">
  <!-- Google fonts - Roboto -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700">
  <!-- owl carousel-->
  <link rel="stylesheet" href="../vendor/owl.carousel/assets/owl.carousel.css">
  <link rel="stylesheet" href="../vendor/owl.carousel/assets/owl.theme.default.css">
  <!-- theme stylesheet-->
  <link rel="stylesheet" href="../css/style.default.css" id="theme-stylesheet">
  <!-- Custom stylesheet - for your changes-->
  <link rel="stylesheet" href="../css/custom.css">
  <!-- Favicon-->
  <link rel="shortcut icon" href="../favicon.png">
  <!-- Tweaks for older IEs--><!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="../assets/lib/layui/css/layui.css" />
  <link rel="stylesheet" href="../assets/css/article/art_list.css" />

  <!-- Favicon-->
  <link rel="shortcut icon" href="../favicon.png">
</head>

<body>
<%
  request.setCharacterEncoding("utf-8");
  String keyword = request.getParameter("keyword");
  request.setAttribute("keyword", keyword);
  List<User> userList = adminDao.getUserList(keyword);

  //分页逻辑开始
  Pagination<User> m_pages = new Pagination<User>();
  int curPages = m_pages.curPages(m_pages.strPage(request, "page"));//获取当前页码
  m_pages.setRows(10);//设置每页显示10条
  int resultconts = userList.size();//取得总的数据数
  int totalPages = m_pages.getPages(resultconts);//取出总页数
  ArrayList<User> userListPage = m_pages.getPageSet(userList, curPages);//获取指针的结果集参数是(结果集，页数)
  //分页逻辑结束
  request.setAttribute("userListPage", userListPage);
%>
<!-- 卡片区域 -->
<%--<div class="container mt-5">--%>
  <div class="card">
    <div class="card-header">用户列表</div>
    <div class="card-body">
      <div class="row">
        <div class="col-md-4 mb-3" style="margin-bottom: 30px;width: 300px">
          <form method="post" action="admin_userList.jsp" role="search" class="ml-auto">
            <div class="input-group">
              <input type="text" name="keyword" placeholder="搜索用户名" class="form-control" value="${requestScope.keyword}">
              <div class="input-group-append">
                <button type="submit" name="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>
              </div>
            </div>
          </form>
        </div>
<%--        未完成导入导出--%>
<%--        <div class="col-md-4 mb-3">--%>
<%--          <form method="post" action="ImportExcelServlet?action=import" enctype="multipart/form-data">--%>
<%--            <div class="input-group">--%>
<%--              <input type="file" name="article_cover" id="file" accept="image/png,image/jpeg" style="display:none;">--%>
<%--              <button type="button" class="btn btn-primary" onclick="document.getElementById('file').click()"> 导入</button>--%>
<%--              <button type="submit" class="btn btn-primary">确定</button>--%>

<%--&lt;%&ndash;              <input type="file" name="file" class="form-control" style="display: none"/>&ndash;%&gt;--%>
<%--&lt;%&ndash;              <div class="input-group-append">&ndash;%&gt;--%>
<%--&lt;%&ndash;                <button type="submit" name="action" value="import" class="btn btn-success">导入</button>&ndash;%&gt;--%>
<%--&lt;%&ndash;              </div>&ndash;%&gt;--%>
<%--            </div>--%>
<%--          </form>--%>
<%--        </div>--%>
<%--        <div class="col-md-4 mb-3">--%>
<%--          <form method="post" action="ImportExcelServlet?action=export">--%>
<%--            <div class="input-group">--%>
<%--              <button type="submit" name="action" value="export" class="btn btn-warning">导出</button>--%>
<%--            </div>--%>
<%--          </form>--%>
<%--        </div>--%>
      </div>


      <!-- 列表区域 -->
      <table class="table table-striped table-dark">
        <thead>
        <tr>
          <th scope="col">用户名</th>
          <th scope="col">用户头像</th>
          <th scope="col">用户性别</th>
          <th scope="col">用户电话</th>
          <th scope="col">用户邮箱</th>
          <th scope="col">创建时间</th>
          <th scope="col">更新时间</th>
          <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${userListPage}" var="item">
          <tr>
            <td>${item.username}</td>
            <td><img style="width: 50px; height: 50px" src="../upload/img/${item.avatar}" alt="用户头像"/></td>
            <td>${item.sex}</td>
            <td>${item.telephone}</td>
            <td>${item.email}</td>
            <td>${item.create_time}</td>
            <td>${item.update_time}</td>
            <td>
              <button data-user_id="${item.userid}" type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteU-modal" onclick="setCategoryId(this)" >删除</button>
            </td>
          </tr>
        </c:forEach>
        </tbody>
      </table>
      <!-- 分页区域 -->
      <nav aria-label="Page navigation example">
        <ul class="pagination">
          <li class="page-item">
            <a class="page-link" href="admin_userList.jsp?page=1">首页</a></li> <%
          if (curPages > 1) {
        %><li class="page-item"><a class="page-link" href="admin_userList.jsp?page=<%=curPages - 1%>">上一页</a></li> <%
          }
        %> <%
          if (curPages < totalPages) {
        %><li class="page-item"><a class="page-link" href="admin_userList.jsp?page=<%=curPages + 1%>">下一页</a></li> <%
          }
        %>
          <li class="page-item"> <a class="page-link" href="admin_userList.jsp?page=<%=totalPages%>">末页</a>
          </li>
        </ul>
      </nav>

      <%--    删除用户--%>
      <div class="modal fade" id="deleteU-modal" tabindex="-1" role="dialog" aria-labelledby="deleteU-modal" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="deleteUserModalLabel">确认删除</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              确定要删除该用户吗？
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
              <form method="post" action="./admin?action=delete">
                <input type="hidden" name="user_id" value="">
                <button type="submit" class="btn btn-danger">确认删除</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<%--</div>--%>


<!-- 添加JavaScript代码 -->
<script>
  function setCategoryId(button) {
    // 获取data-user_id属性的值
    var categoryId = button.getAttribute("data-user_id");

    // 将值设置到隐藏字段中
    document.querySelector("#deleteU-modal input[name='user_id']").value = categoryId;
  }

    document.getElementById('file').addEventListener('change', function() {
    const filename = this.value.split('\\').pop();
    document.getElementById('filename').textContent = filename;
  });
</script>

<script src="../vendor/jquery/jquery.min.js"></script>
<script src="../vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../vendor/jquery.cookie/jquery.cookie.js"> </script>
<script src="../vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="../vendor/owl.carousel2.thumbs/owl.carousel2.thumbs.js"></script>
<script src="../js/front.js"></script>


<!-- 导入第三方的 JS 插件 -->
<script src="../assets/lib/layui/layui.all.js"></script>
<script src="../assets/lib/jquery.js"></script>
<script src="../assets/lib/template-web.js"></script>

</body>

</html>